<template>
  <div class="form-item-el">
    <div v-if="mode === 'DESIGN'">
      <!--      <el-input disabled :placeholder="placeholder" show-word-limit :rows="2" type="textarea" />-->
    </div>
    <div v-else>
      <a-textarea
        v-model="_value.txt"
        :disabled="$attrs.disabled"
        allow-clear
        :max-length="255"
        :placeholder="placeholder"
        :auto-size="{ minRows: 3 }"
        show-word-limit
        @change="changeTextarea"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance } from "vue";
import { isEmpty } from "lodash";

const { proxy } = getCurrentInstance();

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({ txt: "", url: "" })
  },
  placeholder: {
    type: String,
    default: "请输入内容"
  },
  mode: {
    type: String,
    default: "DESIGN"
  },
  required: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(["update:modelValue"]);

const defaultValue = { txt: "", url: "" };
const _value = computed({
  get: () => props.modelValue || defaultValue,
  set: val => emit("update:modelValue", val)
});
const audioUrl = computed(() => {
  return _value.value.url;
});
const changeTextarea = (e: string) => {
  _value.value = {
    txt: e,
    url: audioUrl.value
  };
};

if (isEmpty(_value.value) && !proxy.$attrs.disabled) {
  _value.value = proxy.$attrs.defaultValue || defaultValue;
}

console.log(_value.value);
</script>

<style scoped></style>
